<template>
  <div :class="props.ye === 'contact' ? 'Contact' : 'Friends'">
    <header_part :xiao="xiao" :title="props.title" @goback="goback" />
    <div style="height: 44px;"></div>
    <div class="box" @scroll="move($event)">
      <search_part placeholder="搜索用户昵称" position="left" />
      <div v-for="item1, index in props.FriendsArr" :key="index">
        <div class="titlemove">{{ item1.title }}</div>
        <content_part :item="item1.data[0]" @message="message(item1.data[0])"
          :loveTitle="props.ye === 'contact' ? friends : ''" />
      </div>
      <div class="title">#</div>
      <div class="name">
        <ul>
          <li>
            <search_icon position="firends" />
          </li>
          <li v-for="item, index in props.FriendsArr " :key="index" :class="{ 'blue': index == num }">{{ item.title }}
          </li>
          <li>#</li>
        </ul>
      </div>
    </div>
    <div class="title1" v-show="titleflag">{{ title1 }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import header_part from './header-part.vue'
import search_part from './search-part.vue'
import content_part from './content-part.vue'
import search_icon from './icon/search-icon.vue'
import { useRouter } from 'vue-router'
let router = useRouter()
const props = defineProps({
  FriendsArr: {
    type: Array
  },
  // 控制是哪个页面
  ye: {
    type: String
  },
  // 标题
  title: {
    type: String
  },
  offsetTopArr: {
    type: Array
  }
})
const xiao = ref(true)
// 控制首字母显示隐藏
const titleflag = ref(false)
// 高亮的项
let num = ref(0)
// 控制message组件的显示隐藏
const friends = ref('friends')
const emit = defineEmits(['care', 'nocare', 'goback'])

// 返回到home的评论列表
function goback() {
  emit('goback')
}
const title1 = ref('B')
function move(e) {
  console.log(e.target.scrollTop);
  if (e.target.scrollTop >= 44) {
    titleflag.value = true
  } else {
    titleflag.value = false
  }
  props.offsetTopArr.forEach((item, index) => {
    if (e.target.scrollTop >= item) {
      num.value = index
    }
  })
  // 获取当前的高亮项里的内容
  const blue = document.querySelector('.blue')
  // 赋值给小黑条
  title1.value = blue.innerText
}
function message(item) {
  console.log(item);
  router.push({
    path: '/chatwith',
    query: {
      userName: item.Comment.userNickname,
      userId: item.Comment.userId,
      userAvatar: item.Comment.userAvatar
    }
  })
}

</script>

<style lang="scss" scoped>
$width: 101%;
$height: 100%;

.titlemove {
  height: 30px;
  margin: 20px 20px 0;
  color: #fff;
  font-size: 14px;
}

.blue {
  font-size: 23px !important;
  color: #face15 !important;
}

body,
html {
  height: 100%;
}

.box {
  width: $width;
  height: $height;
  overflow-x: hidden;
  overflow-y: scroll;
}

.name {
  position: fixed;
  right: 0;
  top: 50%;
  width: 20px;

  li {
    color: #fff;
    font-size: 14px;
  }
}

.title,
.title1 {
  height: 30px;
  margin: 20px 20px 0;
  color: #fff;
  font-size: 14px;
}

.title1 {
  margin: 0;
  padding-left: 20px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  margin-top: 43px;
  background-color: #161622;
}

.Friends,
.Contact {
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  height: $height;
  z-index: 100;
  transform: translateY(100%);
  transition: all 1s;
  overflow-x: hidden;
  /* 设置初始透明度 */
  background-color: rgba(22, 22, 34, 1);
  overflow-y: scroll;
  /* 最后一位数字表示透明度，取值范围为0~1，其中0为完全透明，1为不透明 */

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    0% {
      background-color: rgba(0, 0, 0, .1);
    }

    /* 开始时透明度为0 */
    100% {
      background-color: rgba(22, 22, 34, 1);
    }

    /* 结束时透明度为1 */
  }

  animation: fadeIn 1s ease;

  /* 持续3秒，ease为默认的动画速度曲线 */
}


.Contact {
  transform: translateY(0);
}
</style>